<template>
  <div id="app" class="wrapper">
    <transition :name="transitionName">
      <keep-alive exclude="Detail">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <main-tabber />
  </div>
</template>

<script>
import MainTabber from "components/content/mainTabbar/MainTabBar";
export default {
  name: "App",
  data() {
    return {
      transitionName: "",
    };
  },
  components: {
    MainTabber,
  },
  // 接着在父组件内
  // watch $route 决定使用哪种过渡
  watch: {
    $route(to, from) {
      // console.log(to,from)
      const toDepth = to.path.split("/").length;
      console.log(toDepth);
      const fromDepth = from.path.split("/").length;
      console.log(fromDepth);
      this.transitionName =
        toDepth < fromDepth
          ? "slide-right"
          : toDepth == fromDepth
          ? ""
          : "slide-left";
    },
  },
};
</script>

<style>
@import "assets/css/base.css";
.slide-right-enter {
  transform: translateX(-100vw);
  /* opacity: 0; */
}
.slide-right-enter-active {
  transition: all 0.3s ease;
}

.slide-right-enter-to {
  transform: translateX(0);
  /* opacity: 1; */
}
.slide-right-leave {
  transform: translateX(0);
  /* opacity: 1; */
}
.slide-right-leave-active {
  transition: all 0.3s ease;
}
.slide-right-leave-to {
  transform: translateX(100vw);
  /* opacity: 0; */
}

.slide-left-enter {
  transform: translateX(100vw);
  /* opacity: 0; */
}
.slide-left-enter-active {
  transition: all 0.3s ease;
}

.slide-left-enter-to {
  transform: translateX(0);
  /* opacity: 1; */
}
.slide-left-leave {
  transform: translateX(0);
  /* opacity: 1; */
}
.slide-left-leave-active {
  transition: all 0.3s ease;
}
.slide-left-leave-to {
  transform: translateX(-100vw);
  /* opacity: 0; */
}
</style>
